<template>
  <div class="app-container">

    <!-- 搜索表单 -->
    <el-form ref="queryRef" :inline="true" :model="queryParams" v-show="showSearch" label-width="68px">
      <el-form-item label="名称" prop="name">
        <el-input
            placeholder="请输入名称"
            clearable
            v-model="queryParams.name"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 功能按钮栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="success"
            plain
            icon="Edit"
            @click="handleUpdate"
            :disabled="single"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            icon="Delete"
            @click="handleDelete"
            :disabled="multiple"
        >删除
        </el-button>
      </el-col>
      <!-- 功能按钮栏 -->
      <right-toolbar v-model:show-search="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 数据展示表格 -->
    <el-table v-loading="loading" :data="productUnitList" @selection-change="handleException">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="名称" prop="name" width="200"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  添加或修改表单 -->
    <el-dialog v-model="open" :title="title" width="500" append-to-body>
      <el-form ref="productUnitRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="商品单位" prop="name">
          <el-input v-model="form.name"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="summit">确认</el-button>
          <el-button @click="cancle">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 分页条组件 -->
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
    />

  </div>
</template>

<script setup name="ProductUnit">
//==================1.导入区域=====================

//导入API
import * as productUnit from '@/api/base/productUnit.js';
//导入消息弹框
import {ElMessage, ElMessageBox} from "element-plus";
import {updateBrand} from "@/api/product/brand.js";

//==================2.变量区域=====================

//定义分页列表数据模型
const productUnitList = ref([]);
//定义列表总记录数模型
const total = ref();
//数据记载效果
const loading = ref(false);

//proxy 是 Vue3 中的一个新特性，它允许我们在 setup 函数内部直接访问组件实例的属性和方法
const {proxy} = getCurrentInstance();

//定义查询数据
const data = reactive({
  queryParams: {
    name: null,
    pageNum: 1,
    pageSize: 10
  },
  form: {
    id: null,
    name: null
  },
  rules: {
    name: [{required: true, message: "商品单位名称不能为空", trigger: "blur"}]
  }
})

//导出
const {queryParams, form, rules} = toRefs(data)

//定义隐藏搜索控制模型
const showSearch = ref(true)

//添加或修改对话框
const open = ref(false)

//添加或修改对话框标题
const title = ref('')

//复选框操作
const multiple = ref(true)

//单选框
const single = ref(true)

//批量操作
const ids = ref([])

//==================3.事件处理区域==================

//分页函数
function getList() {
  loading.value = true
  productUnit.productUnitList(queryParams.value).then((result) => {
    loading.value = false
    productUnitList.value = result.rows
    total.value = result.total
  })
}

//条件查询函数
function handleQuery() {
  getList();
}

//条件查询重置
/*function resetQuery() {
  queryParams.value = {
    name: null,
    pageNum: 1,
    pageSize: 10
  }
  getList()
}*/
//优化后的查询重置
function resetQuery() {
  proxy.resetForm('queryRef')
  getList()
}

//添加弹框
function handleAdd() {
  open.value = true,
      title.value = '添加商品单位'
  reset()
}

//提交按钮,需要先判断id是否为空来确认是修改还是新添加
function summit() {
  proxy.$refs['productUnitRef'].validate((valid) => {
    if (valid) {
      if (form.value.id) {
        productUnit.updateProductUnit(form.value).then((result) => {
          ElMessage.success(result.msg)
          open.value = false
          getList()
        })
      } else {
        productUnit.addProductUnit(form.value).then((result) => {
          ElMessage.success(result.msg)
          open.value = false
          getList()
        })
      }
    } else {
      proxy.$modal.msgError("表单数据合法！")
    }
  })
}

//取消按钮
function cancle() {
  reset()
  open.value = false
}

//修改函数
function handleUpdate(row) {
  open.value = true
  let _id = row.id || ids.value
  productUnit.productUnitById(_id).then((result) => {
    form.value = result.data
  })
}

//删除函数
function handleDelete(row) {
  let _id = row.id || ids.value
  //删除确认信息
  ElMessageBox.confirm('确认要删除吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(() => {
    productUnit.deleteProductUnit(_id).then((result) => {
      ElMessage.success(result.msg)
      getList()
    })
  }).catch(() => {
    ElMessage.info("取消删除")
  })

}

//增加重置功能
/*function reset() {
  form.value = {
    id: null,
    name: null
  }
}*/
//优化后的增加重置功能
function reset() {
  proxy.resetForm('productUnitRef')
}

//复选函数
function handleException(selection) { //selection是一个数组，被勾选表体数据
  ids.value = selection.map(item => item.id)
  single.value = ids.value.length != 1
  multiple.value = ids.value.length == 0
}

//调用分页查询
getList();

</script>